<div class="note-container">
    {% if clickable | default(value=false) %}
        <button class="note-toggle">
            {% if center | default(value=false) %}
                <div class="note-center">{{ header | markdown | safe }}</div>
            {% else %}
                <div class="note-icon">{{ header | markdown | safe }}</div>
            {% endif %}
        </button>

        {% if hidden | default(value=false) %}
            <div class="note-content" style="display: none;">
            {% else %}
                <div class="note-content" style="display: block;">
                {% endif %}
                {{ body | markdown | safe }}
            </div>
        {% else %}
            <div class="note-header">
                {% if center | default(value=false) %}
                    <div class="note-center">{{ header | markdown | safe }}</div>
                {% else %}
                    <div class="note-icon">{{ header | markdown | safe }}</div>
                {% endif %}
            </div>
            <div class="note-content">{{ body | markdown | safe }}</div>
        {% endif %}
    </div>
